<template>
  <div>
    <van-nav-bar>
      <template #right>
        <div>更多&emsp;></div>
      </template>
      <template #left>
        <div>热销榜</div>
      </template>
    </van-nav-bar>
 <div class="box">
      <div class="box1" v-for="(v, index) in arr" :key="index">
        <img :src="v" alt="" />
        <div>{{ text[index] }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { NavBar } from "vant";
Vue.use(NavBar);

import { Grid, GridItem } from "vant";
Vue.use(Grid);
Vue.use(GridItem);
export default {
  data() {
    return {
      arr: [],
      text: [],
    };
  },
  mounted() {
    this.$http({
      url: "http://localhost:3000/HotList ",
      method: "get",
    }).then((res) => {
      res.data.forEach((element) => {
        this.arr = element.data.img;
        this.text = element.data.text;
      });
    });
  },
};
</script>

<style scoped>
/deep/.van-nav-bar__left {
  font-weight: 600;
  font-size: 20px;
}
/deep/.van-count-down {
  margin-right: 80px;
}
.t1{
    display: flex;
    overflow: hidden;
    overflow: auto;
}
.box {
  height: 130px;
  display: flex;
  overflow: auto;
}
 .box .box1 {
  width:100px;;
  height:130px ;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex-shrink: 1;
  margin-right: 10px;
}
.box .box1 img {
  width: 90px;
  height: 90px;
  margin-top: 10px;
}
 .box .box1 div {
  height: 22px;
  width: 80px;
  display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}

</style>